<template>
    <div class="edinfo">
        <van-nav-bar title="修改信息" left-arrow @click-left="onClickLeft" />
        <van-form>
            <van-cell-group :border="false" inset title="昵称">
                <van-cell :border="false"><van-field v-model="nickname" placeholder="请输入微信号" /></van-cell>
            </van-cell-group>
            <van-cell-group :border="false" title="头像">
                <van-uploader :max-count="1" :after-read="afterRead" preview-image
                    preview-size="60" :accept="'image/*'">
                    <!-- 使用v-if控制上传图标和预览图的显示 -->
                    <div class="upload" v-if="!imageUrl">
                        <van-icon style="font-size: 36px" name="add" aria-label="上传图片" />
                    </div>
                    <!-- 预览图 -->
                    <div v-else style="width: 120px; height: 120px;">
                        <van-image round fit="cover" :src="imageUrl" />
                    </div>
                </van-uploader>
            </van-cell-group>
        </van-form>
        <van-button type="primary" @click="onSubmit">确认修改</van-button>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { userProfile, commonUpload } from '../../../../api/index';
const onClickLeft = () => history.back();
const nickname = ref("");
const imageUrl = ref("");
const base64 = ref("");
let formData = new FormData();
const router = useRouter();
import { Toast } from 'vant';
onMounted(()=>{
    console.log(history.state)
    nickname.value = history.state.nickname;
    imageUrl.value = history.state.avatar;
})
const afterRead = (file: any) => {
    imageUrl.value = file.content;
    formData = new FormData();
    formData.append("file", file.content);
    commonUpload(formData).then(res => {
        if (res.code == 1) {
            base64.value = res.data.fullurl
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
};
const onSubmit = () => {
    formData = new FormData();
    formData.append("nickname", nickname.value)
    formData.append("avatar", base64.value)
    userProfile(formData).then(res => {
        // console.log(res)
        if (res.code == 1) {
            // Toast(res.msg)
            history.back();
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
};
</script>

<style lang="less" scoped>
@import url(../../../../style/common.css);
.edinfo {
    background: #FFFFFF;
    width: 100%;
    height: 100vh;

    // .van-nav-bar {
    //     width: 100%;
    //     height: 52px;
    // }

    // .content {
    //     padding: 15px;

    //     .van-cell {
    //         text-align: left;
    //     }
    // }


    // :deep(.van-nav-bar__left .van-badge__wrapper) {
    //     color: #272635;
    // }
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.van-cell {
    margin: 0 20px;
    text-align: left;
    width: 339px;
    height: 47px;
    background: #F9F9F9;
    border-radius: 9px 9px 9px 9px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .van-field {
        margin: 0;
        padding: 0;
    }
}

.upload {
    width: 335px;
    height: 115px;
    background: #F9F9F9;
    border-radius: 9px 9px 9px 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    box-sizing: border-box;
}

.van-button {
    margin-top: 24px;
    width: 345px;
    height: 40px;
    background: linear-gradient(143deg, #0A84FF 0%, #0A7EF3 100%);
    border-radius: 347px 347px 347px 347px;
}



:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}

:deep(.van-cell-group__title) {
    text-align: left;
}
</style>